<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>第四节课</title>
		<style type="text/css">
			/*去除原来样式*/
			
			* {
				padding: 0;
				margin: 0;
			}
			
			.container {
				width: 100vw;
				height: 100vh;
				display: flex;
				/*
				 * 将边框设置在中间
				 */
				align-items: center;
				justify-content: center;
			}
			
			canvas {
				width: 500px;
				height: 500px;
				border: 1px solid #333333;
			}
			
			/*.anniu{
				width: 100px;
				height: 100px;
				
			}*/
		</style>
	</head>

	<body>
		<!--<img id="img" src="cut.jpeg" alt="" />-->
		<div class="container">
			<canvas id="canvas" width="500" height="500"></canvas>
			<div class="anniu">
				<input type="button" name="" id="rotate" value="摇起来" />
				<input type="button" name="" id="stop" value="停止" />
				<input type="button" name="" id="refresh" value="刷新" />
				
			</div>	
			
		</div>
	</body>

	<script>
		
		
		window.onload = function(){
			
			let oCanvas = document.getElementById("canvas");
			let pen = oCanvas.getContext("2d");
			
			//rotate(角度)
			pen.fillStyle = "chocolate";
			
			let x = 33+100;
				y = 33+100;
				r = 100;
			start();
			
			function start(){
				
				pen.beginPath();
			pen.arc(x,y,r,0,Math.PI*2,true);
			pen.fill();
			
			pen.beginPath();
			pen.arc(x+33+200,y+33+200,r,0,Math.PI*2,true);
			pen.fill();
			
			pen.beginPath();
			pen.arc(x+33+200,y,r,0,Math.PI*2,true);
			pen.fill();
			
			pen.beginPath();
			pen.arc(x,y+33+200,r,0,Math.PI*2,true);
			pen.fill();
				
			}
			
			let timer;
			
			let rotate = document.getElementById("rotate");
			rotate.onclick = function(){
				
				clearInterval(timer);
					//添加定时器，代入数值
					timer = setInterval(function(){

							//pen.clearRect(0,0,500,500);
							pen.beginPath();
							//随机改变颜色
							pen.fillStyle = "#"+Math.round(Math.random()*1000000);
							pen.arc(x,y,r,0,Math.PI*2,true);
							pen.fill();
							
							pen.beginPath();
							pen.fillStyle = "#"+Math.round(Math.random()*1000000);
							pen.arc(x+33+200,y+33+200,r,0,Math.PI*2,true);
							pen.fill();
							
							pen.beginPath();
							pen.fillStyle = "#"+Math.round(Math.random()*1000000);
							pen.arc(x+33+200,y,r,0,Math.PI*2,true);
							pen.fill();
							
							pen.beginPath();
							pen.fillStyle = "#"+Math.round(Math.random()*1000000);
							pen.arc(x,y+33+200,r,0,Math.PI*2,true);
							pen.fill();
							
							
					},5);
					
			}
			
			let stop = document.getElementById("stop");
			stop.onclick = function(){
				clearInterval(timer);
			}
			
			let refresh = document.getElementById("refresh");
			refresh.onclick = function(){
				pen.clearRect(0,0,500,500);
				start();
			}
			
		}
			
	</script>

</html>